<template>
	<div class="app-container">
		<el-tabs v-model="queryParams.type" class="center-tabs" type="card" @tab-click="tabClick">
			<el-tab-pane v-for="dict in carousel_type" :label="dict.label" :name="dict.value">
			</el-tab-pane>
		</el-tabs>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['cm:cmCarouselImg:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['cm:cmCarouselImg:edit']">修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['cm:cmCarouselImg:remove']">删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['cm:cmCarouselImg:export']">导出</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="cmCarouselImgList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center"/>
			<el-table-column label="类型" align="center" prop="type" v-if="columnVisible('type')">
				<template #default="scope">
					<dict-tag :options="carousel_type" :value="scope.row.type"/>
				</template>
			</el-table-column>
			<el-table-column label="图片" align="center" prop="imgUrl" v-if="columnVisible('imgUrl')">
				<template #default="scope">
					<image-preview :src="scope.row.imgUrl" :width="50" :height="50"/>
				</template>
			</el-table-column>
			<el-table-column label="标题" align="center" prop="title" v-if="columnVisible('title')"/>
			<el-table-column label="排序" align="center" prop="sort" v-if="columnVisible('sort')"/>
			<el-table-column label="关联文章id" align="center" prop="contentId" v-if="columnVisible('contentId')"/>
			<el-table-column label="关联活动id" align="center" prop="actId" v-if="columnVisible('actId')"/>
			<el-table-column label="详情图" align="center" prop="contentImg" width="100" v-if="columnVisible('contentImg')">
				<template #default="scope">
					<image-preview :src="scope.row.contentImg" :width="50" :height="50"/>
				</template>
			</el-table-column>
			<el-table-column label="归属部门" align="center" prop="deptId" v-if="columnVisible('deptId')">
				<template #default="scope">
					<span>{{ deptName(scope.row.deptId) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="备注" align="center" prop="remark" v-if="columnVisible('remark')"/>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
				<template #default="scope">
					<el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['cm:cmCarouselImg:query']" v-noPermi="['cm:cmCarouselImg:edit']">查看</el-button>
					<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['cm:cmCarouselImg:edit']">修改</el-button>
					<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['cm:cmCarouselImg:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList"/>

		<!-- 添加或修改轮播图对话框 -->
		<el-dialog :title="title" v-model="open" width="600px" append-to-body>
			<el-form ref="cmCarouselImgRef" :model="form" :rules="rules" label-width="80px" :disabled="!isInsert && !isEdit">
				<el-form-item label="类型" prop="type">
					<el-select v-model="form.type" placeholder="请选择">
						<el-option v-for="dict in carousel_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="标题" prop="title">
					<el-input v-model="form.title" placeholder="请输入"/>
				</el-form-item>
				<el-form-item label="图片" prop="imgUrl">
					<image-upload v-model="form.imgUrl" tips="参考大小：760 × 365，请上传比例接近大小合适的图片，图片过小会影响清晰度，图片过大会影响加载速度，比例不合适会导致图片显示不完全"/>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input-number v-model="form.sort" placeholder="请输入"/>
				</el-form-item>
				<el-form-item label="关联文章" prop="contentId">
					<el-input v-model="form.contentId" placeholder="请选择文章" clearable readonly>
						<template #suffix>
							<el-button type="primary" @click="handleContentAdd" style="margin-right: -10px;">选择</el-button>
							<el-button type="danger" @click="handleContentDel" style="margin-right: -10px;">取消</el-button>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="关联活动" prop="actId">
					<el-input v-model="form.actId" placeholder="请选择活动" clearable readonly>
						<template #suffix>
							<el-button type="primary" @click="handleActAdd" style="margin-right: -10px;">选择</el-button>
							<el-button type="danger" @click="handleActDel" style="margin-right: -10px;">取消</el-button>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="归属部门" prop="categoryId">
					<el-tree-select v-model="form.deptId" :data="deptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" check-strictly default-expand-all filterable :disabled="!checkPermi(['admin'])"/>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark" type="textarea" placeholder="请输入"/>
				</el-form-item>
			</el-form>
			<template #footer v-if="isEdit || isInsert">
				<div class="dialog-footer">
					<el-button type="primary" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>
		<ContentSelect ref="contentSelectRef" @confirmSelect="confirmContentSelect"/>
		<ActSelect ref="actSelectRef" @confirmSelect="confirmActSelect"/>
	</div>
</template>

<script setup name="CmCarouselImg">
import {
	listCmCarouselImg,
	getCmCarouselImg,
	delCmCarouselImg,
	addCmCarouselImg,
	updateCmCarouselImg
} from "@/api/cm/cmCarouselImg";
import ContentSelect from "@/views/cm/cmContent/contentSelect.vue";
import {checkPermi} from "@/utils/permission.js";
import useDeptStore from "@/store/modules/dept.js";
import ActSelect from "@/views/act/actActivityInfo/actSelect.vue";

const {proxy} = getCurrentInstance();
const {carousel_type} = proxy.useDict('carousel_type');

const deptStore = useDeptStore();


const cmCarouselImgList = ref([]);
const isEdit = ref(false);
const isInsert = ref(false);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
// 列显隐信息(able表示列是否可用，visible用于用户控制显隐)
const columns = ref([
	{label: `主键`, able: false, visible: false, key: 'id'},
	{label: `图片`, able: true, visible: true, key: 'imgUrl'},
	{label: `标题`, able: true, visible: true, key: 'title'},
	{label: `排序`, able: true, visible: true, key: 'sort'},
	{label: `类型`, able: true, visible: true, key: 'type'},
	{label: `文章id`, able: true, visible: true, key: 'contentId'},
	{label: `活动id`, able: true, visible: true, key: 'actId'},
	{label: `详情图`, able: false, visible: true, key: 'contentImg'},
	{label: `归属部门`, able: true, visible: true, key: 'deptId'},
	{label: `创建者`, able: false, visible: false, key: 'createBy'},
	{label: `创建时间`, able: false, visible: false, key: 'createTime'},
	{label: `更新者`, able: false, visible: false, key: 'updateBy'},
	{label: `更新时间`, able: false, visible: false, key: 'updateTime'},
	{label: `备注`, able: true, visible: true, key: 'remark'},
]);

const data = reactive({
	form: {},
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		params: {},
		title: null,
		sort: null,
		type: "home",
		contentId: null,
		deptId: null,
	},
	rules: {
		imgUrl: [{required: true, message: "图片不能为空", trigger: "blur"}],
		title: [{required: true, message: "标题不能为空", trigger: "blur"}],
	}
});

const {queryParams, form, rules} = toRefs(data);

function tabClick(p, e) {
	queryParams.value.type = p.props.name
	queryParams.value.pageNum = 1
	getList();
}

/** 列显隐 */
function columnVisible(key) {
	return proxy.checkColumn(columns.value, key);
}

/** 选择文章 */
const contentSelectRef = ref(null)
function confirmContentSelect(item) {
	form.value.contentId = item.id
	form.value.contentTitle = item.contentTitle
	form.value.actId = ''
	form.value.actTitle = ''
}
function handleContentAdd(){
	contentSelectRef.value.show()
}
function handleContentDel(){
	form.value.contentId = ''
	form.value.contentTitle = ''
}

/** 选择活动 */
const actSelectRef = ref(null)
function confirmActSelect(item) {
	form.value.actId = item.id
	form.value.actTitle = item.subject
	form.value.contentId = ''
	form.value.contentTitle = ''
}
function handleActAdd(){
	actSelectRef.value.show()
}
function handleActDel(){
	form.value.actId = ''
	form.value.actTitle = ''
}

/** 查询轮播图列表 */
function getList() {
	loading.value = true;
	listCmCarouselImg(queryParams.value).then(response => {
		cmCarouselImgList.value = response.rows;
		total.value = response.total;
		loading.value = false;
	});
}

// 取消按钮
function cancel() {
	open.value = false;
	reset();
}

// 表单重置
function reset() {
	form.value = {
		id: null,
		imgUrl: null,
		title: null,
		sort: 0,
		type: queryParams.value.type,
		contentId: null,
		contentImg: null,
		deptId: null,
		createBy: null,
		createTime: null,
		updateBy: null,
		updateTime: null,
		remark: null
	};
	proxy.resetForm("cmCarouselImgRef");
}

/** 搜索按钮操作 */
function handleQuery() {
	queryParams.value.pageNum = 1;
	getList();
}

/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm("queryRef");
	handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
	ids.value = selection.map(item => item.id);
	single.value = selection.length != 1;
	multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
	reset();
	open.value = true;
	title.value = "添加轮播图";
	isInsert.value = true;
	isEdit.value = false;
}

/** 查看按钮操作 */
function handleView(row) {
	isEdit.value = false;
	title.value = "查看轮播图";
	getInfo(row);
}

/** 修改按钮操作 */
function handleUpdate(row) {
	isEdit.value = true;
	title.value = "修改轮播图";
	getInfo(row);
}

function getInfo(row) {
	reset();
	const _id = row.id || ids.value
	isInsert.value = false;
	proxy.modal.loading("加载中");
	getCmCarouselImg(_id).then(response => {
		form.value = response.data;
		open.value = true;
		proxy.modal.closeLoading();
	}).catch(err => {
		Promise.reject(err);
		proxy.modal.closeLoading();
	});
}

/** 提交按钮 */
const cmCarouselImgRef = ref(null)

function submitForm() {
	cmCarouselImgRef.value.validate(valid => {
		if (valid) {
			if (form.value.id != null) {
				proxy.modal.loading("提交中");
				updateCmCarouselImg(form.value).then(response => {
					proxy.modal.msgSuccess("修改成功");
					open.value = false;
					getList();
					proxy.modal.closeLoading();
				}).catch(err => {
					proxy.modal.closeLoading();
					Promise.reject(err);
				});
			} else {
				proxy.modal.loading("提交中");
				addCmCarouselImg(form.value).then(response => {
					proxy.modal.msgSuccess("新增成功");
					open.value = false;
					getList();
					proxy.modal.closeLoading();
				}).catch(err => {
					proxy.modal.closeLoading();
					Promise.reject(err);
				});
			}
		}
	});
}

/** 删除按钮操作 */
function handleDelete(row) {
	const _ids = row.id || ids.value;
	proxy.modal.confirm('是否确认删除轮播图编号为"' + _ids + '"的数据项？').then(function () {
		proxy.modal.loading("删除中");
		return delCmCarouselImg(_ids);
	}).then(() => {
		getList();
		proxy.modal.msgSuccess("删除成功");
		proxy.modal.closeLoading();
	}).catch(() => {
		proxy.modal.closeLoading();
	});
}

/** 导出按钮操作 */
function handleExport() {
	proxy.download.post('cm/cmCarouselImg/export', {
		...queryParams.value
	}, `cmCarouselImg_${new Date().getTime()}.xlsx`)
}

/** 查询部门下拉树结构 */
const deptOptions = ref(undefined);
watchEffect(() => {
	deptOptions.value = deptStore.deptTree;
});

getList();
</script>
